<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    dialogWidth="800px"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel 
        v-slot="{ form }" 
        @search="search" 
        :showAddButton="false"
        :selectPer="'anewVisit:page'">
          <job-shop v-model="form.storeId" placeholder="所属门店" />
          <el-select clearable style="width: 200px"  v-model="form.status" placeholder="回访状态">
            <el-option
              v-for="item in dict['回访状态']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-input clearable style="width: 200px;" v-model="form.likeName" placeholder="客戶姓名/手机号/工单编号"/>
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :width="160"
        :isShowPage="true"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="回访记录" style="margin-left: 20px;cursor: pointer" v-permission="'anewVisit:findById'" @click="handleDataChange(row, '回访记录')"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="'anewVisit:del'" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
      <!--工具条-->
    </template>
    <template #dialog>
      <dialog-data-form :value="dialogData"  @operate="handleDataOperate"/>
    </template>
  </base-layout>
</template>

<script>
  import { anewVisitList, deleteVisit, findVisit, saveVisit } from '@/api/after-sale/client/anewVisit'
  import baseMixin from '@/mixins/base'
  import { JobShop } from '@/components/index'
  import { getDict } from '@/utils'
  import DialogDataForm from './components/DialogDataForm.vue'
  export default {
    components: {
      JobShop, DialogDataForm
    },
    mixins: [
      baseMixin({
        findDataById: findVisit,
        findData: anewVisitList,
        deleteData: deleteVisit,
        addData: saveVisit,
        dataName: ['content', 'totalRecords'],
        isAdd: false,
        idName: 'id',
        format(res) {
          return res.map(data => {
            data.status = data.status ? '已回访' : '未回访'
            return data
          })
        }
      })
    ],
    data() {
      return {
        dict: {},
        service:{},
        isAdd: false,
        form: {
          storeId: '',
          status: '',
          likeName: ''
        },
        tableColumnAttributes: [
          {name: '所属门店', value: 'storeName', type: 'text'},
          {name: '客户名称', value: 'clientName', type: 'text'},
          {name: '手机号', value: 'phone', type: 'text'},
          {name: '工单编号', value: 'workOrderCode', type: 'text'},
          {name: '工单项目', value: 'projects', type: 'text'},
          {name: '工单金额', value: 'amount', type: 'text'},
          {name: '工单工时', value: 'sumHours', type: 'text'},
          {name: '工单完工时间', value: 'successTime', type: 'text'},
          {name: '回访状态', value: 'status', type: 'text'},
          {name: '回访人', value: 'userName', type: 'text'},
          {name: '回访时间', value: 'anewVisitTime', type: 'text'},
          {name: '回访结果', value: 'result', type: 'text'},
          {name: '回访备注', value: 'remark', type: 'text'},
        ]
      }
    },
    async created() {
      this.dict = getDict(['回访状态'])
    },
    methods: {
      search(form) {
        this.searchOptions = form
        this.currentPage = 1
        this.setTableData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
